
import type { mapActions } from 'pinia';

<template>
  <div class="page-wrap" ref="PageRef">
    <div class="dashboard-wrap" :style="{'transform': `scale(${scale})`}">
      <div class="left-model">
        <ConModel class="margbot10" title="测试">
          <div style="height:255px;width:100%;"></div>
        </ConModel>
        <ConModel title="地区排行榜">
          <div class="city-list">
            <div class="city-item" v-for="item in dataList" :key="item.id">
              <span class="city-name">{{ item.cityName }}</span>
              <span class="city-bar" :style="{width: item.styleWidth+'px'}">

              </span>
              <span class="city-num">
                {{ item.value }}
              </span>
            </div>
          </div>
        </ConModel>

      </div>
      <div class="center-model">
        <ConModel class="margbot10">
          <ChartsVue :chartData="MapChartData" type="map" class="map-charts"></ChartsVue>
        </ConModel>
        <ConModel title="测试">
          <ChartsVue v-if="LineChartData.length>0" :chartData="LineChartData" type="line" class="line-chart"></ChartsVue>
        </ConModel>

      </div>
      <div class="right-model">
        <ConModel title="测试"></ConModel>

      </div>
    </div>
  </div>
  
</template>
  
<script setup lang='ts'>
import ChartsVue from '@/components/Charts.vue';
import ConModel from '@/components/ConModel.vue';
import {ChartMapData} from '@/assets/ChartMap'
import {onBeforeMount, onMounted, ref} from 'vue'
import { convertData } from '@/utils/utils';
interface ICityData {
  cityName: string,
  id: string
  value: number
  styleWidth: number
}
const PageRef = ref<HTMLElement>()
const dataList = ref<ICityData[]>()
const scale = ref(1)
const MapChartData = convertData(ChartMapData)
const LineChartData = ref<{label: string,value: number}[]>([])
const getLineData = () => {
  setTimeout(() => {
    LineChartData.value=[
      {
        label:'1月',
        value: 20
      },
      {
        label:'2月',
        value: 200
      },
      {
        label:'3月',
        value: 12
      },
      {
        label:'4月',
        value: 2
      },
      {
        label:'5月',
        value: 22
      },
      {
        label:'6月',
        value: 220
      },
      {
        label:'7月',
        value: 222
      },
      {
        label:'8月',
        value: 20
      },
      {
        label:'9月',
        value: 0
      },
      {
        label:'10月',
        value: 100
      },
      {
        label:'11月',
        value: 202
      },
      {
        label:'12月',
        value: 500
      }
    ]
  }, 2000)
}
const getData = () => {
  setTimeout(() => {
    const data = [{
      cityName: '北京',
      id: '1',
      value: 500
    },{
      cityName: '上海',
      id: '2',
      value: 1000
    },{
      cityName: '广州',
      id: '3',
      value: 100
    },{
      cityName: '深圳',
      id: '4',
      value: 300
    },{
      cityName: '杭州',
      id: '5',
      value: 50
    }]
    const maxValue = Math.max.apply(Math,data.map(item => { return item.value }))
    console.log(maxValue);
    dataList.value = data.map(item => ({
      ...item,
      styleWidth: item.value/maxValue * 230
    }))
  }, 2000)
}
getData()
getLineData()
const setScale = () => {
  const realWidth = PageRef.value?.clientWidth || 0
  const realHeight = PageRef.value?.clientHeight || 0
  const scaleX = realWidth/1440
  const scaleY = realWidth/670
  scale.value = Math.min(scaleX, scaleY)
}
onMounted(() => {
  setScale()
  window.addEventListener('resize', setScale)
})
onBeforeMount(() => {
  window.removeEventListener('resize', setScale)
})

</script>
  
<style lang="scss">
.page-wrap{
  height: 100%;
  width: 100%;
}
.dashboard-wrap {
  transform-origin: left top;
  .margbot10{
    margin-bottom: 10px;
  }
  width: 1440px;
  height: 670px;
  background: url('@/assets/bg.png') no-repeat center;
  display: flex;
  justify-content: space-evenly;

  .left-model,
  .right-model {
    width: 315px;
  }
  .left-model{
    .city-list{
      height: 334px;
      .city-item {
        margin-bottom: 5px;
        height: 10px;
        font-size: 12px;
        color: #fff;
        display: flex;
        align-items: center;

        .city-name {
          width: 40px;
          flex-shrink: 0;
        }

        .city-bar {
          background: #1189E7;
          border-radius: 5px;
          height: 100%;
        }

        .city-num {
          width: 40px;
        }
      }
    }

  }
  .center-model {
    width: 780px;
    .map-charts{
      height: 420px;
      background: url('@/assets/map-bg.png') no-repeat center;
      background-size: 80%;
    }
    .line-chart{
      height: 190px;
    }
  }
}</style>